<template>
  <div id="app">
    <h1>hello ,app</h1>
    <!-- 路由的出口 -->
    <!-- 所有的页面我们都可以称之为组件 也就是说一个页面 是由多个组件组成的 并且Vue只有一个页面 index.html 所以叫单页面开发
    所以没法跳转页面 只能跳转组件 所以要配置路由 
    -->
    <!-- router-link相当于a标签 to相当于href to是跳转不是链接-->
    <!-- tag='标签名' 改rooter-linke改成对应标签默认为a标签 -->
    <router-link to="/">Home</router-link>&nbsp;||&nbsp;
    <router-link to="/about">about</router-link>&nbsp;||&nbsp;
    <router-link to="/vue">01声明式渲染</router-link>&nbsp;||&nbsp;
    <router-link to="/model" tag="button">02vue指令</router-link>
    <router-link to="/model-02" tag="button">02vue指令-02demo</router-link>
    <router-link to="/model-03" tag="button">02vue指令-03</router-link>
    <router-link to="/model-04" tag="button">02vue指令-04v-show和v-if</router-link>
    <router-link to="/model-05" tag="button">02vue指令-05v-for</router-link>&nbsp;||&nbsp;
    <router-link to="/on" tag="button">03事件-01v-on</router-link>&nbsp;||&nbsp;
    <router-link to="/bind" tag="button">04属性-01v-bind</router-link>
    <router-link to="/bind-demo" tag="button">04属性-02demo</router-link>
    <router-link to="/bind-tab" tag="button">04属性-tab</router-link>&nbsp;||&nbsp;
    <router-link to="/filter" tag="button">05过滤器-01过滤器</router-link>
    <router-link to="/time" tag="button">05过滤器-02时间戳</router-link>&nbsp;||&nbsp;
    <router-link to="/life" tag="button">06生命周期-01生命周期</router-link>&nbsp;||&nbsp;
    <router-link to="/computed" tag="button">07计算属性-01computed</router-link>
    <router-link to="/computed-demo" tag="button">07计算属性-demo</router-link>
    <router-link to="/getset" tag="button">07计算属性-getset</router-link>&nbsp;||&nbsp;
    <router-link to="/watch" tag="button">08监听属性-01watch监听</router-link>
    <router-link to="/watch-demo" tag="button">08监听属性-02shop</router-link>
    <router-link to="/watch2" tag="button">08监听属性-03watch2监听</router-link>
    <router-link to="/diff" tag="button">08监听属性-04watch和computed的区别.vue</router-link>
    <router-link to="/watch-arr" tag="button">08监听属性-05watch监听数组.vue</router-link>&nbsp;||&nbsp;
    <router-link to="/globalCom" tag="button">09组件-01全局组件</router-link>
    <router-link to="/localCom" tag="button">09组件-02局部组件</router-link>
    <router-link to="/FandSCom" tag="button">09组件-03父子传参</router-link>
    <router-link to="/grandpa" tag="button">09组件-04爷传孙</router-link>&nbsp;||&nbsp;
    <router-link to="/router" tag="button">10路由跳转传参-01路由跳转传参.vue</router-link>&nbsp;||&nbsp;
    <router-link to="/slot" tag="button">11插槽-slot</router-link>&nbsp;||&nbsp;
    <router-link to="/vuex" tag="button">12vuex-vuex</router-link>
    <router-link to="/vuexFn" tag="button">12vuex-vuex的四个辅助函数</router-link>&nbsp;||&nbsp;
    <router-link to="/directive" tag="button">13自定义指令-01自定义指令</router-link>&nbsp;||&nbsp;
    <router-link to="/mixin" tag="button">14混入-01混入</router-link>





    <hr>
    <br>
    <br>

    <router-view />
  </div>
</template>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>
